<template>
  <!-- 条形统计图 -->
  <div class="">
    <div id="bar_container"></div>
  </div>
</template>

<script>
import { Bar } from '@antv/g2plot'

export default {
  name: 'barChart',
  props: {
    chartObj: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      barData1: [
        {
          科室: '放射',
          使用量: 4684506.442,
        },
        {
          科室: '超声',
          使用量: 4137415.0929999948,
        },
        {
          科室: '内镜',
          使用量: 2681567.469000001,
        },
        {
          科室: '心电',
          使用量: 2447301.017000004,
        },
        {
          科室: '核医学',
          使用量: 1303124.508000002,
        },
      ],
    }
  },
  components: {},
  computed: {},
  created() {},
  mounted() {
    console.log('222')
    console.log(this.chartObj)
    this.getBarChart()
  },
  watch: {},
  methods: {
    getBarChart() {
      // todo 图形调整
      const barPlot = new Bar(document.getElementById(this.chartObj.chartId), {
        title: {
          visible: true,
          text: this.chartObj.titleText,
        },
        description: {
          visible: true,
          text: this.chartObj.desText,
        },
        forceFit: true,
        renderer: 'svg',
        data: this.chartObj.data,
        xField: this.chartObj.field.xField,
        yField: this.chartObj.field.yField,
        xAxis: {
          formatter: v => `${Math.round(v / 10000)}万`,
          line: { visible: false },
        },
        barStyle: { lineWidth: '40px' },
        label: {
          visible: true,
          position: 'right', // options: left / middle / right
          adjustColor: true,
        },
        columnStyle: { fill: '#1C8BE4' },
      })

      barPlot.render()
    },
  },
}
</script>

<style lang="less">
#-axis-title {
  display: none;
}
</style>
